<template>
	<view class="pb-2">
		<!-- <view class="bg-white pt-2 pb-2 pl-4 pr-4">
			<u-search :show-action="true" @custom="equipment()" v-model="equipment_name" action-text="搜索"
				placeholder="请搜索设备设施名称"></u-search>
		</view> -->
		<view class="search">
			<input class="search-input" v-model="equipment_name" @input="equipment" placeholder='请搜索设备设施名称' />
			<view class="btn-search" @click="equipment"
				style="width: 21%;color: #FFFFFF;line-height: 33px;border-radius: 18px;text-align: center;	margin-left: -43px;	background: linear-gradient(180deg, #76D904 0%, #417505 100%);">
				搜索
			</view>
		</view>


		<view style="padding: 20rpx 20rpx;padding-top: 10rpx;">
			<view v-for="(item,index) in equipmentlist.datalist" :key='index' class="bg-white rounded-1 p-4 mt-1"
				@click="particulars(item.id)">
				<view class="flexClsNowrapSpcBtw align-center" style="justify-content: space-between;">

					<view style="display:flex;align-items: center;">
						<image style="width:40rpx;height:40rpx; " src="../../static/image/weihu.png">
						</image>
						<span style="font-size:34rpx;margin-left: 3px;"
							class="font-weight-bolder ml-1">{{item.equipment_name}}</span>
					</view>
					<view v-if="item.maintenance_state=='已保养'"
						class="yibaoyang bg-success text-white">{{item.maintenance_state}}</view>
					<view v-if="item.maintenance_state=='待保养'"
						class="daibaoyang bg-warning text-white">{{item.maintenance_state}}</view>
					<view v-if="item.maintenance_state=='未保养'"
						class="weibaoyang bg-danger text-white">{{item.maintenance_state}}</view>
				</view>
				<view style="display:flex;margin-top: 20rpx;">
					<image style="width:160rpx;height:134rpx; object-fit: cover; border-radius: 20rpx;"
						:src="item.first_equipment_image" mode="aspectFill">
					</image>
					<view style="margin-left: 20rpx;">
						<view class="text-body">
							<span style="color:#999">前保养时间：</span>
							{{item.last_time!=null&&item.last_time!=''?item.last_time.split(' ')[0]:item.last_time}}
						</view>
						<view style="margin-top: 20rpx;" class="text-body"><span
								style="color:#999">保养岗位：</span>{{item.dept_name}}-{{item.post_name}}</view>

						<view style="margin-top: 20rpx;" class="text-body"><span style="color:#999">保养周期：</span>
							<span v-if="item.maintenance_cycle==1">一天一次</span>
							<span v-if="item.maintenance_cycle==2">一周一次</span>
							<span v-if="item.maintenance_cycle==3">一月一次</span>
							<span v-if="item.maintenance_cycle==4">一季一次</span>
							<span v-if="item.maintenance_cycle==5">半年一次</span>
							<span v-if="item.maintenance_cycle==6">一年一次</span>
							<span v-if="item.maintenance_cycle==7">半月一次</span>
						</view>

					</view>
				</view>
				<view style="margin-top:20rpx">
					<span style="color:#999">保养单位：</span>{{item.org_name}}
				</view>
				<view style="margin-top:20rpx">
					<span style="color:#999">具体位置：</span>{{item.specific_location}}
				</view>

				<!-- <view style="line-height: 60rpx;" class="text-body">保养时间：2023-05-23-2023-05-30</view> -->
			</view>
		</view>
		<u-loadmore bg-color="#f4f4f4" :status="status" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: '',
				equipmentlist: {
					datalist: [],
					total: 0
				},
				pageIndex: 1,
				equipment_name: ''
			}
		},
		created() {
			this.equipment()
		},
		onShow() {
			this.checkLogin()
		},
		methods: {

			// 验证是否登录或实名认证
			checkLogin() {
				let _this = this
				if (uni.getStorageSync('phone')) {
					if (uni.getStorageSync('loginFlag')) {
						if (!uni.getStorageSync('hourseList')) {
							uni.showModal({
								title: '请先进行业主认证',
								showCancel: false,
								confirmText: '确认',
								confirmColor: '#F9A832',
								success: function(res) {
									if (res.confirm) {
										_this.$Router.push({
											path: '/pages/address/address'
										})
									}
								}
							});
							this.$openInvite()
						} else {
							_this.showFlag = true
							_this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
							_this.name = _this.homelist.proName;
							_this.address = _this.homelist.buildDistrictCode + '-' + _this.homelist.buildTowerCode + '-' +
								_this.homelist.roomUnitNumber + '-' + _this.homelist.roomCode

							this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
							// this.getList()
						}
					} else {
						uni.showModal({
							title: '请先实名认证',
							showCancel: false,
							confirmText: '确认',
							confirmColor: '#F9A832',
							success: function(res) {
								if (res.confirm) {
									_this.$Router.push({
										path: '/pages/realName/realName'
									})
								}
							}
						});
					}
				} else {
					uni.showModal({
						title: '请先登录',
						showCancel: false,
						confirmText: '确认',
						confirmColor: '#F9A832',
						success: function(res) {
							if (res.confirm) {
								console.log('a')
								_this.$Router.pushTab({
									path: '/pages/user/user'
								})
							}
						}
					});
				}
				uni.stopPullDownRefresh()

			},


			particulars(id) {
				uni.navigateTo({
					url: './equipmentMaintenance?id=' + id
				});
			},
			equipment() {
				this.$request.api.getVenusOaEquipmentMaintenanceByOwner({
					owner_show: 1,
					//pro_id: '121',
					pro_id: uni.getStorageSync('project').proId || uni.getStorageSync('projectItem').proId,
					pageIndex: this.pageIndex,
					equipment_name: this.equipment_name
				}).then(res => {
					this.equipmentlist.total = res.data.data.total
					if (res.data.data.datalist.length > 0) {
						this.status = 'loadText'
					} else {
						this.status = 'nomore'
					}
					if (this.pageIndex == 1) {

						this.equipmentlist.datalist = res.data.data.datalist

						console.log(11)
					} else {
						console.log(2)
						res.data.data.datalist.forEach(item => {
							this.equipmentlist.datalist.push(item)
						})
					}
				})
				// uni.request({
				// 	url: 'http://192.168.101.156:8900/rest/v1/venusOaEquipmentMaintenanceService/getVenusOaEquipmentMaintenanceByOwner',
				// 	method: 'POST',
				// 	data: {
				// 		owner_show: 1,
				// 		 pro_id: '121',

				// 		pageIndex: this.pageIndex,
				// 		equipment_name:this.equipment_name
				// 	},
				// 	success: res => {

				// 		this.equipmentlist.total = res.data.data.total
				// 		if (res.data.data.datalist.length > 0) {
				// 			this.status = 'loadText'
				// 		} else {
				// 			this.status = 'nomore'
				// 		}
				// 		if (this.pageIndex == 1) {

				// 			this.equipmentlist.datalist = res.data.data.datalist

				// 			console.log(11)
				// 		} else {
				// 			console.log(2)
				// 			res.data.data.datalist.forEach(item => {
				// 				this.equipmentlist.datalist.push(item)
				// 			})
				// 		}

				// 	}
				// })
			},
			onPullDownRefresh() {
				this.pageIndex = 1
				this.equipment()
				uni.stopPullDownRefresh()
			},
			onReachBottom() {

				if (this.equipmentlist.total > 10) {
					console.log(121212)
					if (this.pageIndex < this.equipmentlist.total / 10) {
						this.status = 'loading';
						this.pageIndex = this.pageIndex + 1;
						this.equipment()
					}
				}
			},
		}
	}
</script>
<style lang="scss">
	page {
		background: #f4f4f4;
	}


	.search {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #3d7fff;
		height: 100rpx;
		border-bottom: 1rpx solid #eeeeee;
		width: 100%;
		padding-left: 27px;
		padding-right: 31px;
		// position: fixed;
		z-index: 20;
		background: #FFFFFF;

		.search-clear {
			width: 36rpx;
			height: 36rpx;
			position: absolute;
			left: 271px;
			top: 50%;
			transform: translateY(-50%);
		}

		.search-input {
			width: 312px;
			height: 66rpx;
			background: #f0f2f5;
			border-radius: 33rpx;
			line-height: 66rpx;
			font-size: 13px;
			padding: 0 33rpx;
			color: #333333;
			box-sizing: border-box;
		}

		.btn {
			width: 21%;
			line-height: 33px;
			// border: 1px solid red;
			border: 1px solid linear-gradient(180deg, #76D904 0%, #417505 100%);
			border-radius: 18px;
			text-align: center;
			margin-left: -43px;
			background: linear-gradient(180deg, #76D904 0%, #417505 100%);
		}
	}
	.yibaoyang{
		padding: 10rpx;
		border-radius:14rpx 0;
	}
	.daibaoyang{
		padding: 10rpx;
		background-color: orange;
		border-radius:14rpx 0;
	}
	.weibaoyang{
		padding: 10rpx;
		border-radius:14rpx 0;
	}
</style>